<script setup>
import {
  reactive,
  onMounted,
  ref,
  provide
} from 'vue'
import {
  useRouter,
  useRoute
} from 'vue-router'
import {
  gt,
  goodsList
} from '../http/api.js'
import Cart from '../components/cart.vue'
import { useStore } from 'vuex'

const data = reactive({
  active_bar: 0,
  storeid: 0,
  gtid: 0
})
const cartNum = ref(0)
provide('cartNum', cartNum)
const store = useStore()
const typeList = ref([])
const goodsList_ = ref([])
const router = useRouter()
const route = useRoute()
const onClickBack = () => {
  router.push({
    path: '/'
  })
}
const getGt = async (stId) => {
  const rst = await gt({
    storeid: stId
  })
  console.log('分类列表', rst)
  typeList.value = rst.data
  data.gtid = rst.data[0].gtId
  getGoods()
}
const sideBarChange = (index) => {
  console.log('index', index)
  data.gtid = typeList.value[index].gtId
  getGoods()
}
const getGoods = async () => {
  console.log(data)
  const rst = await goodsList({
    storeid: data.storeid,
    gtid: data.gtid
  })
  goodsList_.value = rst.data
  for (var i = 0; i < goodsList_.value.length; i++) {
    goodsList_.value[i].orderNum = 0
  }
  console.log('goodslist', rst)
  // 与用户的选择匹配
  var chooseGs = store.getters.store_goods_list(data.storeid)
  console.log('用户选择', chooseGs)
  for (i = 0; i < goodsList_.value.length; i++) {
    for (var j = 0; j < chooseGs.length; j++) {
      if (goodsList_.value[i].goodsId === chooseGs[j].goodsId) {
        goodsList_.value[i].orderNum = chooseGs[j].orderNum
        break
      }
    }
  }
}
const addToCart = (item) => {
  console.log('storeid', data.storeid)
  for (var i = 0; i < goodsList_.value.length; i++) {
    if (goodsList_.value[i].goodsId === item.goodsId) {
      goodsList_.value[i].orderNum += 1
    }
  }
  store.commit('ADD_CART_ITEM', {
    storeid: data.storeid,
    item: [item]
  }, 0)
  cartNum.value = store.getters.cart_item_num
}
const reduceGoods = (item) => {
  console.log(item)
  store.commit('REDUCE_CART_ITEM', {
    storeid: data.storeid,
    item: item
  })
  cartNum.value = store.getters.cart_item_num
}
onMounted(() => {
  const stId = route.query.stId
  data.storeid = stId
  console.log('stId', stId)
  getGt(stId)
  // 重载购物车属性
  cartNum.value = store.getters.cart_item_num
})
</script>
<template>
  <!--
    点击购物按钮之后在订单页面的待结算中显示，导航栏的小车右上角一个小角标
   -->
  <div class="root">
    <Cart></Cart>
    <van-nav-bar title="店铺名称" left-text="返回" left-arrow @click-left="onClickBack"/>
    <p>本店所有商品可送至成信大宿舍床上</p>
    <div class="section1">
      <van-sticky>
        <van-sidebar v-model="data.active_bar" @change="sideBarChange">
          <van-sidebar-item v-for="item in typeList" :key="item.gtId" :title="item.gtName"/>
        </van-sidebar>
      </van-sticky>
      <div class="goods_container">
        <div class="goods_item" v-for="item in goodsList_" :key="item.goodsId">
          <van-image :src="item.goodsImg" width="100" height="100"></van-image>
          <div class="goods_info">
            <div class="title">{{ item.goodsName }}</div>
            <div class="rank">
              <van-rate v-model="item.goodsScore" :size="13" color="#ffd21e" void-icon="star" void-color="#eee"
                        :allow-half="true"/>
            </div>
            <span class="goods_desc">{{ item.goodsDesc }}</span>
            <div class="price_container">
              <span>￥{{ item.goodsPrice }}</span>
              <van-icon name="cart-o" size="20" color="blue" @click="addToCart(item)" v-if="item.orderNum === 0 && item.goodsStockNum!==0"/>
              <van-stepper v-model="item.orderNum" step="1" min="0" :max="item.goodsStockNum" v-if="item.orderNum !== 0 && item.goodsStockNum!==0" @plus="addToCart(item)" @minus="reduceGoods(item)"/>
              <span v-if="item.goodsStockNum === 0" class="stockNum">库存为空</span>
            </div>
            <van-tag plain type="primary">本店回头客第一名</van-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  .stockNum{
    color: red;
    font-size: 13px;
  }

.title {
  font-weight: 600;
  padding: 5px 0;
}

.root {
  height: 100%;
}

.section1 {
  position: relative;
  display: flex;
}

.goods_desc {
  color: #acacac;
  font-size: 13px;
}

.goods_container {
  padding: 5px;
  flex-grow: 1;
  margin-bottom: 100px;
}

.goods_item {
  background-color: #f7f7f7;
  display: flex;
  margin: 0 0 10px 0;
  padding: 5px 0 5px 5px;
}

.goods_info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-left: 5px;
}

.price_container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.price_container span {
  color: orangered;
}

.van-image__img {
  border-radius: 6px;
}
</style>
